<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="left">
                <u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
            </view>
            <view class="title">健康档案</view>
            <view class="right">
                <u-icon name="edit" size="32" color="#333" @click="editInfo"></u-icon>
            </view>
        </view>
        
        <!-- 基本信息 -->
        <view class="basic-info">
            <view class="avatar">
                <image :src="userInfo.avatar" mode="aspectFill"></image>
                <view class="edit" @click="editAvatar">
                    <u-icon name="camera" size="24" color="#fff"></u-icon>
                </view>
            </view>
            <view class="info">
                <view class="name">{{userInfo.name}}</view>
                <view class="detail">
                    <text>{{userInfo.gender}}</text>
                    <text>{{userInfo.age}}岁</text>
                    <text>{{userInfo.height}}cm</text>
                    <text>{{userInfo.weight}}kg</text>
                </view>
            </view>
        </view>
        
        <!-- 健康指标 -->
        <view class="health-indicators">
            <view class="title">健康指标</view>
            <view class="indicators">
                <view class="indicator" v-for="(item, index) in indicators" :key="index">
                    <view class="value" :class="item.status">{{item.value}}</view>
                    <view class="label">{{item.label}}</view>
                    <view class="time">{{item.time}}</view>
                </view>
            </view>
        </view>
        
        <!-- 就诊记录 -->
        <view class="medical-records">
            <view class="header">
                <view class="title">就诊记录</view>
                <view class="more" @click="viewAllRecords">查看全部</view>
            </view>
            <view class="records">
                <view class="record" v-for="(item, index) in medicalRecords" :key="index">
                    <view class="time">{{item.time}}</view>
                    <view class="content">
                        <view class="hospital">{{item.hospital}}</view>
                        <view class="department">{{item.department}}</view>
                        <view class="doctor">{{item.doctor}}</view>
                        <view class="diagnosis">{{item.diagnosis}}</view>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 用药记录 -->
        <view class="medication-records">
            <view class="header">
                <view class="title">用药记录</view>
                <view class="more" @click="viewAllMedications">查看全部</view>
            </view>
            <view class="records">
                <view class="record" v-for="(item, index) in medicationRecords" :key="index">
                    <view class="time">{{item.time}}</view>
                    <view class="content">
                        <view class="name">{{item.name}}</view>
                        <view class="usage">{{item.usage}}</view>
                        <view class="duration">{{item.duration}}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            userInfo: {
                avatar: '/static/images/avatar.png',
                name: '张先生',
                gender: '男',
                age: 45,
                height: 175,
                weight: 70
            },
            indicators: [
                {
                    label: '血压',
                    value: '120/80',
                    time: '2024-03-20',
                    status: 'normal'
                },
                {
                    label: '血糖',
                    value: '5.6',
                    time: '2024-03-20',
                    status: 'normal'
                },
                {
                    label: '心率',
                    value: '75',
                    time: '2024-03-20',
                    status: 'normal'
                },
                {
                    label: '血氧',
                    value: '98%',
                    time: '2024-03-20',
                    status: 'normal'
                }
            ],
            medicalRecords: [
                {
                    time: '2024-03-15',
                    hospital: '北京协和医院',
                    department: '神经内科',
                    doctor: '张医生',
                    diagnosis: '脑卒中后遗症'
                },
                {
                    time: '2024-02-20',
                    hospital: '北京协和医院',
                    department: '神经内科',
                    doctor: '李医生',
                    diagnosis: '高血压'
                }
            ],
            medicationRecords: [
                {
                    time: '2024-03-15',
                    name: '阿司匹林',
                    usage: '每日一次，每次一片',
                    duration: '长期服用'
                },
                {
                    time: '2024-03-15',
                    name: '降压药',
                    usage: '每日一次，每次一片',
                    duration: '长期服用'
                }
            ]
        }
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        editInfo() {
            uni.navigateTo({
                url: '/pages/health/edit'
            })
        },
        editAvatar() {
            uni.chooseImage({
                count: 1,
                sizeType: ['compressed'],
                sourceType: ['album', 'camera'],
                success: (res) => {
                    this.userInfo.avatar = res.tempFilePaths[0]
                }
            })
        },
        viewAllRecords() {
            uni.navigateTo({
                url: '/pages/health/records'
            })
        },
        viewAllMedications() {
            uni.navigateTo({
                url: '/pages/health/medications'
            })
        }
    }
}
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #F7F7FA;
    
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
        }
    }
    
    .basic-info {
        display: flex;
        align-items: center;
        padding: 30rpx;
        background-color: #fff;
        margin-bottom: 20rpx;
        
        .avatar {
            width: 120rpx;
            height: 120rpx;
            border-radius: 60rpx;
            margin-right: 30rpx;
            position: relative;
            
            image {
                width: 100%;
                height: 100%;
                border-radius: 60rpx;
            }
            
            .edit {
                position: absolute;
                right: 0;
                bottom: 0;
                width: 40rpx;
                height: 40rpx;
                background-color: rgba(0, 0, 0, 0.5);
                border-radius: 20rpx;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        
        .info {
            .name {
                font-size: 32rpx;
                color: #333;
                font-weight: bold;
                margin-bottom: 10rpx;
            }
            
            .detail {
                display: flex;
                
                text {
                    font-size: 24rpx;
                    color: #666;
                    margin-right: 20rpx;
                    
                    &:last-child {
                        margin-right: 0;
                    }
                }
            }
        }
    }
    
    .health-indicators {
        background-color: #fff;
        padding: 30rpx;
        margin-bottom: 20rpx;
        
        .title {
            font-size: 28rpx;
            color: #333;
            font-weight: bold;
            margin-bottom: 20rpx;
        }
        
        .indicators {
            display: flex;
            flex-wrap: wrap;
            
            .indicator {
                width: 25%;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-bottom: 20rpx;
                
                .value {
                    font-size: 32rpx;
                    color: #333;
                    font-weight: bold;
                    margin-bottom: 10rpx;
                    
                    &.normal {
                        color: #52c41a;
                    }
                    
                    &.warning {
                        color: #faad14;
                    }
                    
                    &.danger {
                        color: #ff4d4f;
                    }
                }
                
                .label {
                    font-size: 24rpx;
                    color: #666;
                    margin-bottom: 6rpx;
                }
                
                .time {
                    font-size: 20rpx;
                    color: #999;
                }
            }
        }
    }
    
    .medical-records,
    .medication-records {
        background-color: #fff;
        padding: 30rpx;
        margin-bottom: 20rpx;
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20rpx;
            
            .title {
                font-size: 28rpx;
                color: #333;
                font-weight: bold;
            }
            
            .more {
                font-size: 24rpx;
                color: #1890FF;
            }
        }
        
        .records {
            .record {
                display: flex;
                padding: 20rpx 0;
                border-bottom: 2rpx solid #F7F7FA;
                
                &:last-child {
                    border-bottom: none;
                }
                
                .time {
                    width: 160rpx;
                    font-size: 24rpx;
                    color: #999;
                }
                
                .content {
                    flex: 1;
                    
                    .hospital,
                    .department,
                    .doctor,
                    .diagnosis,
                    .name,
                    .usage,
                    .duration {
                        font-size: 24rpx;
                        color: #666;
                        margin-bottom: 6rpx;
                        
                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                    
                    .hospital,
                    .name {
                        font-size: 28rpx;
                        color: #333;
                        font-weight: bold;
                    }
                }
            }
        }
    }
}
</style> 